<template>
  <!-- dialog窗口 用于添加和编辑的弹窗-->
  <el-dialog :title="dialogInfo.title" @close="dialogClose" :visible.sync="dialogVisible">
    <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
      <el-form-item label="头像">
        <el-upload
          class="uploadAvatar"
          ref="uploadAvatar"
          action="/api/students/uploadStuAvatar"
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
          :limit="1"
          name="headimgurl"
          :multiple="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmClick('addStuRuleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import * as api from "@/api"
  export default {
    data() {
      return {
        dialogInfo: {
          title: "增加学员信息",
          action: "add",//操作是增加还是编辑
          editsuccessMsg: "增加成功",
          editerrorMsg: "增加失败"
        },
        showAvatar: true,
        dialogVisible: false,
        stuRules: {
          name: [
            { required: true, message: '请输入名字', trigger: 'blur' }
          ],
          class: [
            { required: true, message: '请输入班级', trigger: 'blur' }
          ],
          degree: [
            { required: true, message: '请输入学历', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请输入城市', trigger: 'blur' }
          ],
          productUrl: [
            { required: true, message: '请输入项目地址', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ]
        },
        stuForm: {
          name: '',
          productUrl: '',
          headimgurl: '',
          class: '',
          age: '',
          city: '',
          degree: '',
          description: ''
        },
        oldFrom: {}
      }
    },
    created() {
    //储存初始状态表单数据
      this.oldFrom = {...this.stuForm}
    },
    mounted() {
        this.$bus.$on("addstudents",()=>{
           this.stuForm = this.oldFrom//清空输入框
            this.dialogInfo.title = "增加学生信息";
            this.dialogInfo.action = "add";//增加行为
            this.dialogVisible = true;
        });//相当于订阅

        this.$bus.$on("editstudents",(row)=>{
            this.dialogInfo.title = "编辑学生信息";
            this.dialogInfo.action = "edit";//编辑行为
            this.dialogVisible = true;
            //回显 浅拷贝
            let r = {...row}
           /*  delete r.sId; */
            delete r._id;
            this.stuForm = r;
        });
    },
    methods: {
      dialogClose() {//dialog关闭时触发的回调
       
      },
      uploadSuccess(r) {//图片上传成功的回调
      //console.log(r);
      this.stuForm.headimgurl = r.headimgurl
      },
      removeAvatar(r) {

      },
      confirmClick(formName) {
          //点击添加学生信息,需要表单校验，stuForm
        this.$refs[formName].validate(valid=>{
           // console.log(valid);//添加后true
           if(valid){////校验通过
            this.dialogVisible = false;
           switch(this.dialogInfo.action){//判断行为
                case 'add':
                    api.addstuApi(this.stuForm).then(res=>{
                    if(res.data.state){//高权限添加成功
                    this.$message({
                        message: '恭喜你，此学生添加成功！',
                        type: 'success'
                    });
                    this.$bus.$emit("updatestudents");
                    this.stuForm = this.oldFrom//清空输入框
                    }
                    }).catch(err=>{
                    console.log(err);
                    })
                break;
                case 'edit':
                    api.editStuApi(this.stuForm).then(res=>{
                        //console.log(res);//更新成功
                        if(res.data.state){
                            this.$bus.$emit("updatestudents")
                            this.$message({
                            message: '此学生信息更新成功！',
                            type: 'success'
                        });
                        }
                        this.stuForm = this.oldFrom
                    }).catch(err=>{
                        console.log(err);
                        this.$message.error(err)
                    })
              }
           }
           //清除图片上传列表,上传另一个头像
           this.$refs.uploadAvatar.clearFiles()
        })
      }
    }
  }
</script>
<style>
.uploadAvatar {
  text-align: left;
}
.el-upload-list__item.is-success,
.el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}
.el-dialog__header {
  padding: 0 !important;
  line-height: 60px;
}
</style>
